<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <link rel="stylesheet" href="scss/03.min.css">
	</head>
	<body>
		<div id="app">
            <div class="card" v-for="item in studentData" :key="item.name">
                <div class="content">
                    <div class="img">
                        <img :src="item.src">
                    </div>
                    <span>姓名：{{item.name}}</span>
                    <span>年龄：{{item.age}}</span>
                    <span>性别：{{item.sex}}</span>
                    <span>总分：{{item.chinese+item.math+item.english}}</span>
                </div>
                <div @mouseover = "mouseover" @mouseout = "mouseout" :style='display' class="score" v-if="(item.chinese >= 60) & (item.math >= 60) & (item.english >= 60)">
                    <div class="nav" >----</div>
                    <span :style='change'>语文：{{item.chinese}}</span>
                    <span :style='change'>数学：{{item.math}}</span>
                    <span :style='change'>英语：{{item.english}}</span>
                </div>
            </div>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data(){
					return{
                        studentData: [
                        {name:'张三',age: 20,sex:'男',chinese: 90,math: 60, english: 80, src:"img/head-1.jpg"},
                        {name:'李四',age: 20,sex:'男',chinese: 50,math: 60, english: 80, src:"img/head-2.jpg"},
                        {name:'王五',age: 20,sex:'男',chinese: 80,math: 80, english: 70, src:"img/head-3.jpg"},
                        ],
                        display: {
                            // background:'red',
                        },
                        change: {

                        }
                    }
                    
                },
                methods: {
                        mouseover () {
                            // console.log("a");
                            // this.$data.display.background="green"
                            this.$data.display.height = '280px'
                            this.$data.change.height = '10%'
                        },
                        mouseout () {
                            // console.log("b");
                            // this.$data.display.background="red"
                            this.$data.display.height = '30px'
                            this.$data.change.height = '0%'
                        }
                    }
            }).mount('#app');
		</script>
	</body>
</html>
